<template>
<div>
<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>角色列表</span>
	</div>
	<el-table
	:data="roleList"
	:header-cell-style="{
		'background-color': '#f4f4f5',
	    'color': '#616161',    
	}"
	border
	style="width: 100%">
		<el-table-column
		  label="角色名称"
		  >
		  <template slot-scope="scope">
		  	<div>{{scope.row.role_name}}</div>
		  </template>
		</el-table-column>
		<el-table-column
		  label="角色id"
		  >
		  <template slot-scope="scope">
		  	<div>{{scope.row.role_id}}</div>
		  </template>
		</el-table-column>
		<!-- <el-table-column
		  label="角色等级"
		  width="200">
		  <template slot-scope="scope">
		  	<div>{{scope.row.grid_level}}</div>
		  </template>
		</el-table-column> -->
		<el-table-column
		  label="操作"
		  >
		  <template slot-scope="scope">
		  	<el-button type="primary" size="mini" @click="menu(scope.row.role_id)">配置菜单</el-button>
		  	<el-button type="success" size="mini" @click="edit(scope.row)">编辑</el-button>
		  	<el-button 
		  	v-if="scope.row.role_id != 'admin' && scope.row.role_id != 'clbm' && scope.row.role_id != 'wgy' && scope.row.role_id != 'wgz' "
		  	type="danger" size="mini" @click="del(scope.row.role_id)">
		  	删除</el-button>
		  </template>
		</el-table-column>
	</el-table>
</el-card>

<el-dialog
  title="配置菜单"
  :visible.sync="menuDialogVisible"
  width="80%">


  <el-tabs tab-position="left" >
    <el-tab-pane :label="item.name"
	v-for="(item, index) in treedata" :key="index"
    >
    	<el-tree :data="item.children" 
		@node-click="handleNodeClick"
		class="tree"
		node-key="id"
		default-expand-all
		:indent="40"
		:expand-on-click-node="false"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span style="width:200px;"> 
					{{ data.name }} 
					<i class="el-icon-check green"
					v-if="data.state == '1'"
					></i>
					<i class="el-icon-close red"
					v-else
					></i>
				</span>
			
			</span>
		</el-tree>

    </el-tab-pane>
    <!-- <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
  </el-tabs>

  <br>

<!--  -->


<!--   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
</el-dialog>



<el-dialog
  title="角色"
  :visible.sync="roleDialogVisible"
  width="600px">
  
  	<el-form ref="form" :rules="rules" :model="form" label-width="130px">

		<el-form-item label="角色名称：" prop="role_name" >
			<el-input v-model="form.role_name" style="width:300px;"></el-input>
		</el-form-item>

	</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="roleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span>
</el-dialog>


</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'test',
	
	data () {
		return {
		  	roleList : [],

		  	systemList : [],

		  	menuDialogVisible : false,

		  	treedata : [],

		  	role_id : '',

		  	roleDialogVisible : false,

		  	form : {},

		  	rules: {
				role_name: [
					{ required: true, message: '请输入角色名称', trigger: 'blur' },
				],
			},

		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			this.$http({
				fun : 'roleList',
				cb : res => {
					console.log(res);
					this.roleList = res;
				}
			});
		},

		menu (id) {
			console.log(id);

			this.role_id = '';

			this.$http({
				fun : 'getMenuForRole',
				role_id : id,
				cb : res => {
					console.log(res);
					const result = this.$util.transData(res, 'id', 'parent_id', 'children');

					console.log(result);
					this.treedata = result[0].children;
					this.role_id = id;
					this.menuDialogVisible = true;
				}
			});

		},

		handleNodeClick(item) {
	        console.log(item);

	        let para = {
	        	fun : 'setMenuForRole',
	        	role_id : this.role_id,
	        	cb : res => {
	        		this.$message.success('操作成功');
	        		this.menu(this.role_id);
	        	}
	        };

	        //已经有这个菜单的权限
	        if(item.state == '1'){
	        	para['id'] = item.id;
	        	para['type'] = '1';
	        }else{	//没有这个菜单的权限。
	        	para['id'] = item.parent_ids + item.id;
	        	para['type'] = '0';
	        }

	        this.$http(para);

	        // let para = {
	        // 	fun : 'setMenuForRole',
	        // 	role_id : this.role_id,
	        // 	cb : res => {
	        // 		this.$notify.success({
	        // 			title : '成功',
	        // 			message : '操作成功',
	        // 		});
	        // 		this.menu(this.role_id);
	        // 	},
	        // 	err : res => {
	        // 		this.$notify.error({
	        // 			title : '失败',
	        // 			message : res,
	        // 		});
	        // 	}
	        // };

	        // //已经有这个菜单的权限
	        // if(item.contain){
	        // 	para['id'] = item.id;
	        // 	para['type'] = '1';
	        // }else{	//没有这个菜单的权限。
	        // 	para['id'] = item.parent_ids + ',' + item.id;
	        // 	para['type'] = '0';
	        // }
	        
	        // http(para);
	    },


	    del (id) {
	    	this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'deleteRole',
	        		role_id : id,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });

	    },

	    edit (item) {
	    	this.form = item;
	    	this.roleDialogVisible = true;
	    },

	    save () {
	    	this.$refs['form'].validate((valid) => {
	          if (valid) {
	            this.$http({
		    		fun : 'createRole',
		    		...this.form,
		    		cb : res => {
		    			console.log(res);
		    			this.$message.success('操作成功');
		    			this.roleDialogVisible = false;
		    			this.init();
		    		},
		    		err : res => {
		    			this.$message.error(res);
		    		}
		    	});
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	    	
	    },
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
